<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
body {
	background: #534741;
	font: bold 120% Arial, Helvetica, sans-serif;
}

ul, li {
	margin: 0;
	padding:0;
	list-style: none;
}  

#links ul {
        list-style-type: none;
        width: 240px;
} 

#links li {
        border: 1px dotted #999;
        border-width: 1px 0;
        padding: 15px 0;
        margin: 0;
}

#links li a { 
        color: #990000;
        display: block;
        padding: 5px;
        text-decoration: none;
}
div {
	width: 255px;
	height: 300px;
	overflow-x: hidden;
	overflow-y: scroll;
	-webkit-clip-path: polygon(0 0, 20px 20px, 40px 0, 60px 20px, 80px 0, 100px 20px, 120px 0, 140px 20px, 160px 0, 180px 20px, 200px 0, 220px 20px, 240px 0, 255px 0, 255px 300px, 240px 300px, 220px 280px, 200px 300px, 180px 280px, 160px 300px, 140px 280px, 120px 300px, 100px 280px, 80px 300px, 60px 280px, 40px 300px, 20px 280px, 0 300px);
	clip-path: url(#clipping);
}

li:nth-child(even) {
	background: #CCC
}

li:nth-child(odd) {
	background: #AAA
}

ul:first-child {
	margin-top: 20px;
}

ul:last-child {
	margin-bottom: 20px;
}
  </style>
</head>
<body>
<svg width="0" height="0">
	<defs>
		<clipPath id="clipping">
			<polygon points="0 0, 20 20, 40 0, 60 20, 80 0, 100 20, 120 0, 140 20, 160 0, 180 20, 200 0, 220 20, 240 0, 255 0, 255 300, 240 300, 220 280, 200 300, 180 280, 160 300, 140 280, 120 300, 100 280, 80 300, 60 280, 40 300, 20 280, 0 300">
		</clipPath>
	</defs>
</svg>
<div id="links">
<ul>
<li><a>List Item 1</a></li>
<li><a>List Item 2</a></li>
<li><a>List Item 3</a></li>
<li><a>List Item 4</a></li>
<li><a>List Item 5</a></li>
<li><a>List Item 6</a></li>
<li><a>List Item 7</a></li>
<li><a>List Item 8</a></li>
<li><a>List Item 9</a></li>
<ul>
</div>

</body>
</html>